<template>
	<div>
		<div style="text-align: left; margin-bottom: 5px;">
			<el-row>
				<el-col :span="8"><el-button style="margin: auto;" type="primary" @click="clearFilter">清除所有过滤器</el-button></el-col>
				<el-col :span="16">
					<span style="font-size: 12px;  display: inline-block; margin-left: 5px; background-color: #b1b1b1;">
						<span class="color-block executing-row "></span>
						<span class="color-font">进行中</span>
						<span class="color-block success-row "></span>
						<span class="color-font">已完成</span>
						<span class="color-block warning-row "></span>
						<span class="color-font">即将过期</span>
						<span class="color-block expired-row  "></span>
						<span class="color-font">已经过期</span>
					</span>
				</el-col>
			</el-row>
		</div>
		<div class="wrapper" v-if="showTable">
			<el-table border ref="publshRef" :default-sort="{ prop: 'date', order: 'descending' }" :height="tableHeigh" :data="tableData" :row-class-name="tableRowClassName">
				<el-table-column fixed label="任务名称" width="120" prop="taskName">
					<template #default="scope">
						<el-popover effect="light" trigger="hover" placement="top" width="auto" arrow-class="my-arrow" popper-class="my-popper">
							<template #default>
								<div>任务明细: {{ scope.row.taskDesc }}</div>
								<div>任务报酬: {{ scope.row.salary }}</div>
								<div>任务级别: {{ scope.row.level }}</div>
							</template>
							<template #reference>
								<el-tag>{{ scope.row.taskName }}</el-tag>
							</template>
						</el-popover>
					</template>
				</el-table-column>

				<el-table-column
					label="是否完成"
					width="100"
					prop="finished"
					:filters="[{ text: '已完成', value: '0' }, { text: '未完成', value: '1' }]"
					:filter-method="filterFinish"
					:formatter="formatFinish"
				></el-table-column>
				<el-table-column label="截止时间" width="240" prop="deadline" sortable :filter-method="filterHandler"></el-table-column>
				<el-table-column label="过期时间" width="240" prop="expired" sortable :filter-method="filterHandler"></el-table-column>
				<el-table-column label="接收人" width="120" prop="receiver"></el-table-column>

				<el-table-column fixed="right" label="操作" width="120">
					<template #default="scope">
						<el-popover :hide-after="50" trigger="click" :visible="scope.buttonVisible" placement="right" :width="170" arrow-class="my-arrow" popper-class="my-popper">
							<div style="text-align: center;">
								<el-button size="small" type="warning" @click="makeExpired(scope.row)">任务失效</el-button>
								<el-button size="small" type="primary" @click="showDetail(scope.row)">明细</el-button>
							</div>
							<template #reference>
								<el-button type="info" @click="scope.buttonVisible = !scope.buttonVisible">执行修改</el-button>
							</template>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="mask" v-else @click="initPublishTaskList"><div class="tip">点击获取我的发布</div></div>
	</div>
</template>

<script>
import { expiredTask, getMyTask } from '@/api/task';
import { ElMessage } from 'element-plus';
import store from '@/store/index';
export default {
	data() {
		return {
			user: '',

			// 三天的毫秒数
			THREE_DAY_IN_MS: 24 * 60 * 60 * 1000 * 3,
			now: '',

			showTable: false,
			buttonVisible: false,
			tableHeigh: 350,
			tableData: [],
			finishOption: [{ value: '1', label: '未完成' }, { value: '0', label: '已完成' }]
		};
	},
	methods: {
		formatFinish(row, column, cellValue, index) {
			const option = this.finishOption.find(item => item.value === cellValue);
			return option ? option.label : cellValue;
		},
		clearFilter() {
			this.$refs.publshRef.clearFilter();
		},

		filterFinish(value, row) {
			// console.log(row);
			return row.finished === value;
		},
		filterHandler(value, row, column) {
			const property = column['property'];
			return row[property] === value;
		},
		tableRowClassName({ row, rowIndex }) {
			//设置颜色
			// 进行中：如果有接收者且未过期，蓝色
			// 完成：绿色
			// 即将过期：没有接收者，且距离截止时间仅有3天，红色
			// 已过期：灰白
			const expiredTime = new Date(row.expired);
			const deadlineTime = new Date(row.deadline);
			const now = this.now;
			//任务未完成
			if (row.finished === '1') {
				//已过期直接抬走
				if (now > expiredTime) {
					return 'expired-row';
				}
				//有人接任务
				if (row.receiver) {
					//任务进行中
					if (expiredTime > now) {
						return 'executing-row';
					}
				}
				//没人接任务
				else {
					//三天内过期
					if (expiredTime - now < this.THREE_DAY_IN_MS) {
						return 'warning-row';
					}
				}
			}
			//任务人为完成
			else if (row.finished !== '1' && row.receiver) {
				return 'success-row';
			}

			return '';
		},
		makeExpired(row) {
			const expiredTime = new Date(row.expired);
			const deadlineTime = new Date(row.deadline);
			if (this.now > expiredTime) {
				ElMessage.error('任务已失效，不可再次失效！');
				return;
			}
			if (row.finished === '0' && row.receiver) {
				ElMessage.error('任务已完成，不可失效！');
				return;
			}
			if (row.finished !== '0' && row.receiver) {
				ElMessage.warning('任务已被接收，请先与接收人协商一致');
				return;
			}

			if (!row.receiver) {
				this.$confirm('此操作将使其失效，无法被接收，无法被完成，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const param = {
						id: row.id
					};

					expiredTask(param).then(resp => {
						if (resp.success) {
							this.$message({
								type: 'success',
								message: '修改成功!'
							});
							this.clearEdit();
							this.initPublishTaskList();
						} else {
							this.$message({
								type: 'error',
								message: '修改失败！' + resp.message
							});
						}
					});
				});
			}
		},
		showDetail(row) {
			store.commit('MUTATION_TASK_DETAIL', row);
			this.$router.push('/home/task-detail');
		},
		initPublishTaskList() {
			getMyTask(this.user, true).then(resp => {
				this.tableData = resp.rows;
				this.showTable = true;
			});
		}
	},
	mounted() {
		this.now = Date.now();
		const user = window.sessionStorage.getItem('user');
		this.user = JSON.parse(user);
	}
};
</script>

<style>
.color-block {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.color-font {
	display: inline-block;
	margin-left: 5px;
	margin-right: 10px;
}
.el-table .warning-row,
.warning-row {
	background: #ffa5a7;
}

.el-table .success-row,
.success-row {
	background: #98fb98;
}
.el-table .executing-row,
.executing-row {
	background: #98d4eb;
}
.el-table .expired-row,
.expired-row {
	background: #d9d9d9;
}
.my-popper.el-popover {
	color: #e8e8e8;
	background: #6f6f6f;
	border-color: #6f6f6f;
	border: 0px;
}
.my-popper.el-popper[data-popper-placement^='right'] .el-popper__arrow::before {
	background-color: #6f6f6f;
}
.my-popper.el-popper[data-popper-placement^='left'] .el-popper__arrow::before {
	background-color: #6f6f6f;
}
.my-popper.el-popper[data-popper-placement^='top'] .el-popper__arrow::before {
	background-color: #6f6f6f;
}
</style>
